<template>
  <div id="role">
    <!-- 新增用户按钮 -->
    <!-- <Button type="primary" @click.native="addRole">新增角色</Button>
    <Divider /> -->

    <!-- 角色列表 -->
    <div id="roleTable">
      <!-- <Table border :columns="roleTableHead" :data="role.roleListSta"></Table> -->
    </div>

    <!-- 新增角色 -->
    <RoleAdd></RoleAdd>

    <!-- 资源配置 -->
    <RoleResource></RoleResource>

    <!-- 编辑角色 -->
    <RoleEdit></RoleEdit>
  </div>
</template>

<script>
// import { Button, Divider, Table } from "iview";
import { mapState, mapMutations, mapActions } from "vuex";
import RoleAdd from "./RoleAdd"; //新增角色
import RoleResource from "./RoleResource"; //编辑角色
import RoleEdit from "./RoleEdit"; //编辑角色

export default {
  name: "Role",
  data() {
    return {
      //表格头
      roleTableHead: [
        {
          title: "角色ID",
          key: "id",
          align: "center"
        },
        {
          title: "角色名",
          key: "name",
          align: "center"
        },
        {
          title: "创建时间",
          key: "crtime",
          align: "center"
        },
        {
          title: "修改时间",
          key: "chtime",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  type: "Button",
                  class: "ivu-btn ivu-btn-warning",
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.roleResourceSet(params.row);
                    }
                  }
                },
                "资源配置"
              ),
              h(
                "Button",
                {
                  type: "Button",
                  class: "ivu-btn ivu-btn-info",
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.roleEdit(params.row);
                    }
                  }
                },
                "编辑角色"
              ),
              h(
                "Button",
                {
                  type: "Button",
                  class: "ivu-btn ivu-btn-error",
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.roleRemove(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  created() {
    this.roleListAct(); //初始化用户列表
  },
  mounted() {},
  computed: {
    ...mapState({
      role: state => state.role, //角色
      resource: state => state.resource //资源
    })
  },
  methods: {
    ...mapMutations([
      "roleAddModalMut", //新增角色模态框
      "roleResourceModalMut", //资源配置模态框
      "roleEditModalMut", //编辑角色模态框
      "roleOneMut", //获取当前选中的角色
      "roleListDelOneMut" //删除角色列表里的一条数据
    ]),
    ...mapActions([
      "roleListAct", //请求角色数据
      "roleResourceListAct" //根据角色获取对应资源
    ]),
    //新增角色
    addRole() {
      this.roleAddModalMut({
        state: true
      }); //打开新增角色模态框
    },
    //资源配置
    roleResourceSet(row) {
      this.roleResourceModalMut({
        state: true
      }); //打开资源角色模态框
      this.roleOneMut({
        state: row
      }); //获取当前选中的角色
      this.roleResourceListAct(); //根据角色获取对应资源
    },
    //编辑角色
    roleEdit(row) {
      this.roleEditModalMut({
        state: true
      }); //打开编辑模态框
      this.roleOneMut({
        state: row
      }); //获取当前选中的角色
    },
    //删除角色
    roleRemove(id) {
      let _self = this;
      //根据用户id获取用户信息
      let obj = this.$qs.stringify({
        userId: id
      });
      this.$axios.post("/acl_role/removeRole", obj).then(res => {
        let roleId = res.data;
        if (roleId) {
          _self.roleListDelOneMut({
            state: roleId
          });
          _self.$Message.success("删除成功");
        } else {
          _self.$Message.error("删除失败");
        }
      });
    }
  },
  components: {
    // Button,
    // Divider,
    // Table,
    RoleAdd,
    RoleResource,
    RoleEdit
  }
};
</script>
